import { querySelect, queryInput, queryNumberInput, queryButtonList, queryCountTo, queryRemoteSelect, queryRadio } from './tableTypeFilter'
/**
 * @Description 获取组件表格组件
 * @param { tableOption: Array<any> } 当前列配置列表
 * @param { tableData: Array<any> } 表格数据
 * @param { isFilter: Boolean } 是否需要过滤项
 * @param { isMultiSelectHide: (row: object) => Boolean } 多选是否隐藏
 * @param { props: object } 额外配置项
 * @param { readOnly: boolean } 是否只读
 * @param { touchDisplayList: Array<{rowIndex: number, colIndex: number}> } 记录显示输入
 * @param { formRefName: string } 表单ref名字用于校验表单
 * @return JSX
*/
const queryTableComponent = function ({ tableOption, tableData, isFilter, isMultiSelectHide, props, readOnly, style = { width: '100%' }, touchDisplayList, formRefName }) {
    let h = this.$createElement;
    let border = true, stripe = true; // 是否需要边线 斑马线
    let headerCellStyle = { textAlign: 'center' }; // 表格头部样式
    return (
        <el-form show-message={false} props={{ model: { tableData } }} ref={formRefName}>
            <el-table
                ref="table"
                style={style}
                maxHeight="100%"
                {...{ props: { ...props, data: tableData || [], border, stripe, headerCellStyle, 'header-cell-class-name': this.handleHeaderCellClass, 'cell-class-name': ({ row }) => false && 'disableHeadSelection' } }}
                {...{
                    on: {
                        'sort-change': this.handleSortChange
                    }
                }}
            >
                {tableOption.map((option, colIndex) => {
                    return queryTableRowOption.call(this, { option, tableData, readOnly, colIndex, isFilter, touchDisplayList });
                })}
            </el-table>
        </el-form>
    );
};
/**
 * @Description 获取过滤配置项
 * @param { row: object } 当前行过滤器配置项
 * @param { option: Boolean } 当前列配置项
 * @return JSX | null
*/
const queryTableFilterOption = function (option) {
    let h = this.$createElement;
    let model = this.filterModel;
    let config = option.queryFilterType || { type: 'input' };
    config = { ...config, optionList: typeof config.optionList === 'function' ? config.optionList.call(this, model) : config.optionList }
    let paramOption = { config, model, option };
    switch (config.type) {
        case 'select':
            return querySelect.call(this, paramOption);
        case 'remote-select':
            return queryRemoteSelect.call(this, paramOption);
        case 'radio':
            return queryRadio.call(this, paramOption);
        case 'input':
            return queryInput.call(this, paramOption);
        case 'number':
            return queryNumberInput.call(this, paramOption);
        default:
            return null
    }
}
/**
 * @Description 获取表格行配置
 * @param { option: any } 当前列配置项
 * @param { tableOption: Array } 表格源数据
 * @param { readOnly: boolean } 是否只读
 * @param { colIndex: number } 列下标
 * @param { isFilter: boolean } 是否需要过滤项
 * @param { touchDisplayList: Array<{rowIndex: number, colIndex: number}> } 记录显示输入
 * @return JSX
*/
const queryTableRowOption = function ({ option, tableData, readOnly, colIndex, isFilter, touchDisplayList }) {
    let h = this.$createElement;
    let { type, selectable, fixed, label } = option;
    switch (type) {
        case 'selection':
            return !readOnly && <el-table-column
                type="selection"
                selectable={(row) => selectable ? !selectable(row) : true}
                align="center"
                fixed={fixed}
                width="55">
            </el-table-column>
        case 'index':
            return <el-table-column
                type="index"
                align="center"
                fixed={fixed}
                width="55"
                label={label}>
            </el-table-column>
        case 'button':
            return !readOnly && <el-table-column label={label} scopedSlots={{
                default: ({ $index, row }) => {
                    let paramOption = { model: row, option, row, config: option, tableData, $index, colIndex };
                    return queryButtonList.call(this, paramOption)
                }
            }}>
            </el-table-column>
        default:
            return queryFilterColumn.call(this, { option, tableData, readOnly, colIndex, isFilter, touchDisplayList })

    }
};
/**
 * @Description 
 * @param {rules: Array | Object} 校验项
*/
const getIconColor = function (rules) {
    if (!rules) return
    if (Object.prototype.toString.call(rules) === '[object Object]' && rules.required) {
        return { color: '#F56C6C' }
    }
    if (rules.some(option => option.required)) {
        return { color: '#F56C6C' }
    }
}
/**
 * @Description 需要过滤或者不需要过滤的表格
 * @param { option: any } 当前列配置项
 * @param { tableOption: Array } 表格源数据
 * @param { readOnly: boolean } 是否只读
 * @param { colIndex: number } 列下标
 * @param { isFilter: boolean } 是否需要过滤项
 * @param { touchDisplayList: Array<{rowIndex: number, colIndex: number}> } 记录显示输入
 * @return JSX
*/
const queryFilterColumn = function ({ option, tableData, readOnly, colIndex, isFilter, touchDisplayList }) {
    let h = this.$createElement;
    let { prop, label, width, minWidth, align = 'center', sortable, type, fixed, isShowOverflowTooltip, } = option;
    let scopedSlots = {
        default: ({ $index, row }) => {
            let paramOption = { model: row, option, row, config: option, tableData, $index, colIndex };
            let viewType = option.queryViewType && option.queryViewType.call(this, row);
            // 数字编辑
            if (viewType && viewType === 'countTo') {
                return queryCountTo.call(this, paramOption);
            }
            if (!readOnly && viewType) {
                return (
                    <div class="custom-input-box" onClick={() => {
                        let currentIndex = touchDisplayList.find(({ $rowIndex, $colIndex }) => $rowIndex === $index && $colIndex === colIndex);
                        touchDisplayList.forEach(option => {
                            if (option.sort === 1) {
                                option.sort = 2
                            } else {
                                option.sort = null
                            }
                        });
                        if (currentIndex) {
                            currentIndex.sort = 1;
                        } else {
                            touchDisplayList.push({ $rowIndex: $index, $colIndex: colIndex, sort: 1 })
                        }
                        this.$nextTick(() => {
                            touchDisplayList.forEach(option => {
                                if (option.sort === 2) {
                                    option.sort = null
                                }
                            });
                        })
                    }}>
                        <i class="el-icon-edit" style={getIconColor(option.rules)} onClick={(e) => {
                            e.preventDefault();
                            e.stopPropagation();
                        }}></i>
                        <div style={{ textAlign: align, width: '100%', "min-height": '28px' }}>
                            <el-form-item prop={`tableData.${$index}.${prop}`} rules={option.rules}>
                                {queryTableRowComponent.call(this, { option, paramOption, touchDisplayList, $index, colIndex, viewType })}
                            </el-form-item>
                        </div>
                    </div>
                );

            }
            // 普通显示
            return option.renderView ? option.renderView.call(this, row, option, $index, colIndex) : row[prop];
        }
    };
    let props = { fixed, prop, label, width, minWidth, align, sortable, 'show-overflow-tooltip': isShowOverflowTooltip };
    return isFilter ? (
        <el-table-column {...{ props }}>
            <el-table-column
                {...{ props: { ...props, sortable: false, label: '' } }}
                scopedSlots={scopedSlots} render-header={queryTableFilterOption.bind(this, option)}>

            </el-table-column>
        </el-table-column>
    ) : <el-table-column  {...{ props }} scopedSlots={scopedSlots} ></el-table-column>
}
/**
 * @Description 获取表格中特殊组件
 * @param { option: any } 当前列配置项
 * @param { paramOption: Object } 自定义组装数据
 * @param { touchDisplayList: Array<{rowIndex: number, colIndex: number}> } 记录显示输入
 * @param { $index: number } 行下标
 * @param { colIndex: number } 列下标
 * @param { viewType: string } 输入类型
 * @return JSX
*/
const queryTableRowComponent = function ({ option, paramOption, touchDisplayList, $index, colIndex, viewType }) {
    const queryTypeComponent = (viewType, focus) => {
        switch (viewType) {
            case 'number':
                return queryNumberInput.call(this, paramOption, focus)
            case 'select':
                return querySelect.call(this, paramOption, focus);
        }
    }
    if (option.isTouchDisplay) {
        let currentIndex = touchDisplayList.find(({ $rowIndex, $colIndex }) => $rowIndex === $index && $colIndex === colIndex);
        if (currentIndex && currentIndex.sort === 1) {
            return queryTypeComponent(viewType, true)
        } else {
            return queryCountTo.call(this, paramOption, !currentIndex?.sort);
        }
    } else {
        return queryTypeComponent(viewType, false)
    }
}
/**
 * @Description 获取表格分页
 * @param { paginationConfig: any } 基础分页配置项
 * @return JSX
*/
const queryPagination = function (paginationConfig = this.paginationConfig) {
    let h = this.$createElement;
    let { currentPage, pageSizes, pageSize, total, layout, align } = paginationConfig;
    return (
        <div style={{ 'text-align': align, padding: '20px 0' }}>
            <el-pagination
                {...{
                    on: {
                        'size-change': value => {
                            this.paginationConfig.pageSize = value;
                            this.queryTableDataList();
                        },
                        'current-change': value => {
                            this.paginationConfig.currentPage = value;
                            this.queryTableDataList();
                        }
                    }
                }}
                current-page={currentPage}
                page-sizes={pageSizes}
                page-size={pageSize}
                layout={layout}
                total={total || 0}
            ></el-pagination>
        </div>
    );
};
/**
 * @Description 获取基础收缩表单
 * @param { collapseOption: Array<object> } 收缩配置项
 * @return JSX
*/
const queryBaseCollapse = function ({ collapseOption }) {
    let h = this.$createElement;
    return (
        <el-collapse v-model={this.activeNames}>
            {collapseOption.map(option => (
                <el-collapse-item name={option.component}>
                    <template slot="title">
                        <div class="collapse-header">
                            <span>{option.label}</span>
                            {option.slotRight && !this.readOnly && option.slotRight.call(this)}
                        </div>
                    </template>
                    <option.component {...{ props: option.props }} style={option.style} onSiteSalesForecastRealTimeCal={() => this.siteSalesForecastRealTimeCal({
                        load: false
                    })} ref={option.component}></option.component>
                </el-collapse-item>
            ))}
        </el-collapse>
    )
}
/**
 * @Description 获取表单数据
 * @return JSX
*/
const queryForm = function ({ formOption }) {
    let h = this.$createElement;
    return (
        <rz-form form={formOption} ref="form" onChange={(option) => option.config.handlerChange && option.config.handlerChange.call(this, option)} />
    )
}
/**
 * @Description 获取Tab页签
 * @return JSX
*/
const queryTab = function ({ tabOption, activeName }) {
    let h = this.$createElement;
    return <el-tabs v-model={activeName} type="card">
        {tabOption.map(option => (<el-tab-pane lazy label={option.label} name={option.component}>
            <div class="dialog-content">
                <option.component dataAll={option.dataAll} readOnly={option.readOnly} isHistoryDialog={option.isHistoryDialog} />
            </div>
        </el-tab-pane>))}

    </el-tabs >
}
export { queryTableComponent, queryPagination, queryBaseCollapse, queryForm, queryTab };
